<template>
  <div class="mask2"></div>
  <div class="listlyric" ref="lyricbox" @wheel.passive="contextScroll">
    <p
      v-for="(value, index) of lyric"
      :key="index"
      v-html="value.ly"
      :data-time="value.time"
    ></p>
  </div>

  <div class="bline-1">
    <span
      class="scrol"
      :style="`height:${MaxH}px;top:${slideTop}px;`"
      @mousedown.prevent="ScrollBar1"
    ></span>
  </div>
</template>

<script>
import { ref, toRef, onMounted } from "vue";
import { useStore } from "vuex";
import lyricAutoPlay from "@/components/floorFuntionZone/FloorSongList/playListLyric/LyricAutoPlayMixin.js";
import LyricScrollBar from "@/components/floorFuntionZone/FloorSongList/playListLyric/LyricScrollBarMixin.js";

export default {
  name: "FloorRightLyric",

  setup() {
    const lyricbox = ref(null);
    const store = useStore();
    const lyric = toRef(store.state.SongLyric, "lyric");
    const objectDistance = lyricAutoPlay(lyricbox);

    //   歌词滚动条
    const ScrollBar = LyricScrollBar(lyricbox, objectDistance, lyric);

    onMounted(() => {
      store.commit("SongLyric/changelyricboxElement", lyricbox.value);
    });

    return {
      lyricbox,
      lyric,
      ...ScrollBar,
    };
  },
};
</script>

<style scoped lang="less">
.mask2 {
  position: absolute;
  left: 560px;
  top: 0;
  z-index: 3;
  width: 420px;
  height: 250px;
  background: #121212;
  opacity: 0.01;
}
.nocnt {
  position: absolute;
  right: 40px;
  top: 0;
  z-index: 4;
  margin: 21px 0 20px 0;
  width: 354px;
  overflow: hidden;
}

.listlyric {
  position: absolute;
  right: 40px;
  top: 0;
  z-index: 4;
  margin: 21px 0 20px 0;
  height: 219px;
  width: 354px;
  overflow: hidden;
  p {
    color: #989898;
    word-wrap: break-word;
    text-align: center;
    line-height: 32px;
    height: auto !important;
    min-height: 32px;
    transition: color 0.7s linear;
  }
}

p.z-sel {
  color: #fff;
  font-size: 14px;
}
.bline-1 {
  position: absolute;
  top: -1px;
  right: 2px;
  z-index: 2;
  width: 6px;
  height: 260px;
  background: #000;
  opacity: 0.5;
  z-index: 11;
}
.scrol {
  position: absolute;
  left: auto;
  right: 0;
  width: 4px;
  height: 100px;
  border-radius: 5px;
  border: 1px solid #a6a6a6;
  background: #868686;
  opacity: 0.8;
  cursor: pointer;
}
.nolyric {
  padding-top: 85px;
  text-align: center;
  line-height: 43px;
}
</style>
